<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/static/js/jqgrid/bootstrap/searching/toolbar/">
    <!-- 引入自定义的公共脚本 -->
    <script src="<%=request.getContextPath()%>/static/js/owner/jqgrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="<%=request.getContextPath()%>/static/js/owner/moment.min.js"></script>

    <script src="<%=request.getContextPath()%>/static/css/jqgrid.css"></script>

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of`                                                                     jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/ecmascript" src="../../../js/bootstrap-datepicker.js"></script>
    <script type="text/ecmascript" src="../../../js/bootstrap3-typeahead.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

    <meta charset="utf-8" />
</head>
<body>
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm">
        <div class="searchDiv">
            <div class="item">
                <label>事项:</label>
                <input id="item" name="item" class="easyui-textbox">
            </div>
            <div class="item">
                <label>金额:</label>
                <input name="amount" class="easyui-numberbox" precision="2">
            </div>
            <div class="item">
                <label>交易类型:</label>
                <input id="type" name="type" class="easyui-combobox">
            </div>
            <div class="item">
                <label>分类:</label>
                <input id="category" name="category" class="easyui-combobox">
            </div>
            <div class="item">
                <label>创建时间:</label>
                <input name="createTime" class="easyui-datebox" class="easyui-textbox">
            </div>

            <div class="searchBtn">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch()">重置</a>
            </div>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div class="operationBtn">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openDialog()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editWallet()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteWallet()">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-picture" plain="true" onclick="openImageDialog()">生成图片</a>
    </div>
</div>

<!-- jqGrid 表格 -->
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<div id="dlg" class="easyui-dialog" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate>
        <div class="itemDlg">
            事项描述:<input name="item" class="easyui-textbox" required="true">
        </div>
        <div class="itemDlg">
            金额:<input name="amount" class="easyui-numberbox" precision="2" required="true">
        </div>
        <div class="itemDlg">
            交易类型:<input name="type" class="easyui-combobox">
        </div>
        <div class="itemDlg">
            分类:<input name="category" class="easyui-combobox">
        </div>
        <div class="itemDlg">
            支付方式:<input name="paymentMethod" class="easyui-combobox">
        </div>
        <div class="itemDlg">
            创建时间:<input name="createTime" class="easyui-datetimebox" required="true" data-options="formatter:formatter,parser:parser">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveWallet()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    $(function () {
        const pageConfig = {
            url: 'myWallet/getData',
            emptyMsg: '暂无数据',
        };

        initializeDataGrid(pageConfig);

        // $("input[textboxname='item']").textbox('setValue', '默认值');
        // $("#item").textbox('setValue', '默认值');

        $("input[textboxname='type']").combobox({
            url: 'sysDictData/getInfo?dictType=wallet_type',
            valueField:'dictValue',textField:'dictLabel',
            editable: false,
            prompt: '请选择交易类型',
            panelHeight:'auto',
        })

        $("input[textboxname='category']").combobox({
            url: 'sysDictData/getInfo?dictType=wallet_category',
            valueField:'dictValue',textField:'dictLabel',
            editable: false,
            prompt: '请选择分类',
            panelHeight:'auto',
        })

        $("input[textboxname='paymentMethod']").combobox({
            url: 'sysDictData/getInfo?dictType=wallet_payment_method',
            valueField:'dictValue',textField:'dictLabel',
            editable: false,
            prompt: '请选择分类',
            panelHeight:'auto',
        })
    })

    function openDialog() {
        $('#dlg').dialog('open').dialog('setTitle', '新增').window('center');
        $('#fm').form('clear');
        url = 'myWallet/save';

        //给时间框设置默认值为当前时间
        // setDefaultTime("createTime");

        $("input[textboxname='paymentMethod']").combobox({
            url: 'sysDictData/getInfo?dictType=wallet_payment_method',
            valueField:'dictValue',textField:'dictLabel',
            editable: false,
            prompt: '请选择分类',
            panelHeight:'auto',
            onLoadSuccess: function (data) {
                //设置默认值
                $("input[textboxname='paymentMethod']").combobox('setValue', "1");
            }
        })
    }

    function saveWallet() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.code == 200) {
                    $('#dlg').dialog('close');
                    $('#datagrid').datagrid('reload');
                } else {
                    $.messager.show({
                        title: '错误',
                        msg: result.msg
                    });
                }
            }
        });
    }

    function editWallet() {
        var row = $('#datagrid').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('setTitle', '编辑').window('center');
            $('#fm').form('load', row);
            url = 'myWallet/update?id=' + row.id;
        } else {
            $.messager.alert('提示', '请选择要编辑的记录！', 'info');
        }
    }

    function deleteWallet() {
        var row = $('#datagrid').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '确定要删除该记录吗？', function(r) {
                if (r) {
                    $.post('myWallet/delete', {id: row.id}, function(result) {
                        if (result.code == 200) {
                            $('#datagrid').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: '错误',
                                msg: result.msg
                            });
                        }
                    }, 'json');
                }
            });
        } else {
            $.messager.alert('提示', '请选择要删除的记录！', 'info');
        }
    }

    // 金额格式化
    function currencyFormatter(value) {
        return value ? '¥' + value.toFixed(2)  : '-';
    }

    // 支出列样式（红色）
    function disburseStyler(value) {
        return value > 0 ? 'color:red;font-weight:bold' : '';
    }

    function openImageDialog() {
        $('#imgDlg').dialog('open').dialog('setTitle', '生成图片').window('center');
        $('#imgForm').form('clear');
        $('#imageResult').empty();
    }

    function generateImage() {
        var formData = {
            prompt: $("#prompt").textbox('getValue'),
            image_size: $("#image_size").combobox('getValue'),
            batch_size: $("#batch_size").numberbox('getValue'),
            num_inference_steps: 20,
            guidance_scale: 7.5,
            model: "Kwai-Kolors/Kolors"
        };

        $.ajax({
            url: 'api/generate-image',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(result) {
                if(result.code === 200) {
                    var images = result.extend.image.images;
                    $('#imageResult').empty();
                    images.forEach(function(image) {
                        $('#imageResult').append('<img src="' + image.url + '" style="max-width:100%;margin:10px 0;">');
                    });
                } else {
                    $.messager.alert('错误', result.msg || '生成图片失败', 'error');
                }
            },
            error: function() {
                $.messager.alert('错误', '请求失败，请稍后重试', 'error');
            },
            dataType: 'json'
        });
    }
</script>
</body>
</html>
